<template>
  <div>
    <div style="display: flex; width: 1880px">
      <div style="width: 320px; margin-right: 20px">
        <div style="height: 240px" class="comp">
          <div class="title">当前检测</div>
          <List1 style="margin-top: 10px"></List1>
        </div>
        <div style="height: 216px" class="comp">
          <div class="title" style="display: float">
            异常检测
            <el-button type="text" class="more-button">
              更多<a-icon type="vertical-left" class="more-icon" />
            </el-button>
          </div>
          <Photo v-on:getPhotoData="PhotoData"></Photo>
        </div>
        <div style="height: 438px" class="comp">
          <div class="title" style="display: float">
            检测记录
            <a-date-picker
              v-model="time1"
              @change="onChange"
              dropdownClassName="DatePicker"
              class="date-picker"
            >
              <span
                ><a-icon
                  slot="suffixIcon"
                  type="calendar"
                  class="date-picker-icon"
                />{{ time1 }}
              </span>
            </a-date-picker>
          </div>
          <List2
            :Lindex="Pindex"
            :Ltime="time1"
            v-on:setList2Total="getList2Total"
          ></List2>
        </div>
      </div>
      <div style="width: 1206px">
        <div class="center">
          <div class="gaiyao-wai">
            <div class="title">概要统计</div>
            <div class="gaiyao-fenbu">
              <div class="gaiyao">
                <img
                  src="..\assets\image\概要统计-今日告警数-icon.png"
                  style="float: left"
                />
                <div class="gyfont">
                  <p>
                    今日告警数 <br /><span style="font-size: 20px">{{
                      List2Total
                    }}</span>
                  </p>
                  <div></div>
                </div>
              </div>
              <div class="gaiyao">
                <img
                  src="..\assets\image\概要统计-运行中设备-icon.png"
                  style="float: left"
                />
                <div class="gyfont">
                  <p>
                    运行中设备 <br /><span style="font-size: 20px">4/15</span>
                  </p>
                  <div></div>
                </div>
              </div>
              <div class="gaiyao">
                <img
                  src="..\assets\image\概要统计-算法模型-icon.png"
                  style="float: left"
                />
                <div class="gyfont">
                  <p>
                    算法模型 <br /><span style="font-size: 20px">9/12</span>
                  </p>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 775px; border: 1px solid #3c6fd2">
            <div class="title" style="display: float">
              告警统计

              <a-dropdown class="riqiDropdown">
                <a class="riqiDropdown-a">
                  {{ time2 }} <a-icon type="down" />
                </a>
                <a-menu
                  slot="overlay"
                  @click="onClick"
                  class="riqiDropdown-item"
                >
                  <a-menu-item key="按日期"> 按日期 </a-menu-item>
                  <a-menu-item key="按时段"> 按时段 </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
            <div id="Line1" style="width: 100%; height: 100%" v-if="Line"></div>
            <div id="Line2" style="width: 100%; height: 100%" v-else></div>
            <div></div>
          </div>
        </div>
        <div style="height: 512px" class="map">
          <div style="width: 30px; margin-top: 0px">
            <el-button type="text" class="map-button">
              <img src="..\assets\zhyq\地图重置.png"
            /></el-button>
            <el-button type="text" class="map-button">
              <img src="..\assets\zhyq\安保岗定位.png"
            /></el-button>
            <el-button type="text" class="map-button">
              <img src="..\assets\zhyq\告警定位.png"
            /></el-button>
            <el-button type="text" class="map-button">
              <img src="..\assets\zhyq\摄像头定位.png"
            /></el-button>
            <el-button type="text" class="map-button">
              <img src="..\assets\zhyq\停车场定位.png"
            /></el-button>
          </div>
        </div>
        <div style="height: 240px; margin-top: 0px" class="comp">
          <Camera></Camera>
        </div>
      </div>
      <div style="width: 318px !important; margin: 0 20px">
        <div style="height: 424px" class="comp">
          <div style="position: relative; height: 65%">
            <div class="title anquan">安全评价</div>
            <div id="Radar" class="rader"></div>
          </div>

          <p class="anquandengji">当前安全等级 <span>中</span></p>
          <p class="anquanjianyi">可疑人员出入频发<br />建议加强出入管理</p>
        </div>
        <div style="height: 488px" class="comp">
          <div class="title">值班表</div>
          <Zhiban></Zhiban>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import List1 from "@/components/gysj/List1.vue";
import List2 from "@/components/gysj/List2.vue";
import Camera from "@/components/gysj/Camera.vue";
import Zhiban from "@/components/gysj/Zhiban.vue";
import Photo from "@/components/gysj/Photo.vue";
export default {
  components: {
    Camera,
    List1,
    List2,
    Zhiban,
    Photo,
  },
  watch: {
    LineDate: {
      handler(newVal, oldVal) {
        this.drawLine();
      },
      deep: true,
    },
  },
  data() {
    return {
      isShow: false,
      Pindex: 0,
      date: "",
      time1: undefined,
      time2: "按日期",
      SpaceHeight: "20px",
      List2Total: 0,
      Line1xDate: [],
      Line1yDate: [],
      Line2yDate: [],
      Line2xDate: [],
      BarxDate: [],
      BarZCDate: [],
      BarGJ1Date: [],
      BarGJ2Date: [],
      Line: true,
    };
  },

  mounted() {
    // 声明一个变量指向Vue实例this，保证作用域一致
    this.date = this.getData(new Date());
    this.time1 = this.getData(new Date());
    this.getLine1Data();
    this.timer = setInterval(() => {
      this.date = this.getData(new Date()); // 修改数据date
    }, 6000);
    this.drawRadar();
    this.getBarData();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    onChange(value, dateString) {
      this.time1 = dateString;
    },
    onClick(e) {
      this.time2 = e.key;
      if (e.key == "按日期") {
        this.Line = true;
        this.getLine1Data();
      } else {
        this.Line = false;
        this.getLine2Data();
      }
    },
    getData(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      return year + "-" + month + "-" + date;
    },
    getBarData() {
      this.$http
        .get("http://szls.chiefdata.net/server/recognitionFile/getssjc")
        .then(
          (response) => {
            this.BarZCDate = response.body.obj[0].hours;
            this.BarxDate = response.body.obj[0].hoursList;
            this.BarGJ1Date = response.body.obj[4].hours;
            this.BarGJ2Date = response.body.obj[3].hours;
            this.drawBar();
          },
          (response) => {
            console.log("请求失败");
          }
        );
    },
    getLine1Data() {
      this.$http
        .get("http://szls.chiefdata.net/server/recognitionFile/getgjtj", {
          params: {
            tjtype: 1,
          },
        })
        .then(
          (response) => {
            this.Line1xDate = response.body.obj.x;
            this.Line1yDate = response.body.obj.y;
            this.drawLine("Line1", this.Line1xDate, this.Line1yDate);
          },
          (response) => {
            console.log("请求失败");
          }
        );
    },
    getLine2Data() {
      this.$http
        .get("http://szls.chiefdata.net/server/recognitionFile/getgjtj", {
          params: {
            tjtype: 2,
          },
        })
        .then(
          (response) => {
            this.Line2xDate = response.body.obj.x;
            this.Line2yDate = response.body.obj.y;
            this.drawLine("Line2", this.Line2xDate, this.Line2yDate);
          },
          (response) => {
            console.log("请求失败");
          }
        );
    },
    PhotoData(index) {
      this.Pindex = index;
    },
    getList2Total(e) {
      this.List2Total = e;
    },
    enter() {
      this.isShow = true;
      this.SpaceHeight = "30px";
    },
    leave() {
      this.isShow = false;
      this.SpaceHeight = "20px";
    },
    drawRadar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("Radar"));
      // 绘制图表
      myChart.setOption({
        tooltip: {},

        legend: {
          data: ["安全评级"],
          itemWith: 28,
          itemHeight: 6,
          right: 10,
          top: 6,
          textStyle: {
            color: "#ffffff",
            fontSize: 10,
          },
        },
        radar: {
          // shape: 'circle',
          center: ["50%", "58%"],
          radius: 90,
          name: {
            textStyle: {
              color: "#ffffff",
              fontSize: 10,
            },
          },
          indicator: [
            { name: "生产事故", max: 100 },
            { name: "人员伤亡", max: 100 },
            { name: "安全隐患", max: 100 },
            { name: "职业危害", max: 100 },
            { name: "出入管理", max: 100 },
            { name: "行为纪律", max: 100 },
          ],
          splitLine: {
            lineStyle: {
              color: "#0048ff",
            },
          },
        },
        series: [
          {
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                name: "安全评级",
                value: [78, 80, 28, 35, 50, 99],
                areaStyle: {
                  color: "#00f0ff",
                },
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    color: "#00f0ff",
                  },
                },
                lineStyle: {
                  color: "#1d97b6",
                },
              },
            ],
          },
        ],
        animationDuration: 1000,
        animationEasing: "cubicInOut",
      });
    },
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("Bar"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          right: 10,
          left: 50,
        },
        legend: {
          right: 10,
          itemWidth: 12,
          itemHeight: 12,
          data: ["正常", "脱岗", "人员闯入"],
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
          },
        },
        xAxis: {
          data: this.BarxDate,
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#FFffff",
            },
          },
        },
        yAxis: {
          name: "次数",

          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#FFffff",
            },
          },
        },
        series: [
          {
            name: "脱岗",
            type: "bar",
            barWidth: 14,
            stack: "使用情况",
            data: this.BarGJ1Date,
            itemStyle: {
              normal: { color: "#feb628" },
            },
          },
          {
            name: "人员闯入",
            type: "bar",
            barWidth: 10,
            stack: "使用情况",
            data: this.BarGJ2Date,
            itemStyle: {
              normal: { color: "#e67150" },
            },
          },
          {
            name: "正常",
            type: "bar",
            barWidth: 10,
            stack: "使用情况",
            data: this.BarZCDate,
            itemStyle: {
              normal: { color: "#0192ed" },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    drawLine(id, xDate, yDate) {
      this.$echarts.dispose(document.getElementById(id));
      let myChart = this.$echarts.init(document.getElementById(id));
      myChart.setOption({
        grid: {
          right: 50,
          top: 40,
          left: 50,
          bottom: 57,
        },
        xAxis: {
          name: "近三十天",
          nameTextStyle: { fontSize: 6 },
          type: "category",
          data: xDate,
          axisLine: {
            lineStyle: {
              color: "#FFffff",
            },
          },
        },
        yAxis: {
          name: "告警数",
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#FFffff",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: yDate,
            type: "line",
            animationDuration: 5000,
            animationEasing: "cubicInOut",
          },
        ],
      });
    },
  },
};
</script>

<style >
.home {
  background-image: url(../assets/image/背景.png);
  width: 1920px;
  height: 1080px;
}
.main {
  min-height: 100%;
  padding: 0 20px !important;
}
.title {
  color: #1af7ff;
  text-align: left;
  font-size: 16px;
  padding-left: 10px;
  background-image: url(../assets/image/当前检测-标题-背景图片.png);
  background-repeat: no-repeat;
  background-size: 171px 30px;
  line-height: 30px;
  height: 30px;
  font-weight: bold;
}
.comp {
  margin: 20px 0;
  border: 1px solid #3c6fd2;
}
.gaiyao {
  margin-top: 40px;
  margin-left: 10px;
  width: 120px;
}
.gyfont {
  float: left;
  color: #ffffff;
  font-size: 12px;
  margin-left: 10px;
}
.map {
  background-image: url(../assets/image/新增地图.png);
}
.ant-calendar {
  background-color: #142766 !important;
  border: 1px solid #3c6fd2 !important;
  color: #ffffff !important;
  font-size: 8px;
  width: 200px !important;
  height: 340px !important;
}
.ant-calendar-input {
  background-color: #142766 !important;
  color: #ffffff !important;
  font-size: 8px;
}
.ant-calendar-date {
  color: #ffffff !important;
  font-size: 8px;
  width: 20px !important;
  height: 20px !important;
}
.ant-calendar-header .ant-calendar-year-select,
.ant-calendar-header .ant-calendar-month-select {
  color: #ffffff !important;
  font-size: 8px;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  color: #ffffff !important;
  font-size: 12px;
  text-align: center;
}
.ant-dropdown-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* 告警统计样式 */
.riqiDropdown {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  color: #fff;
  border: 1px solid #ffffff;
  padding: 0px 5px;
}
.riqiDropdown:hover {
  color: #1af7ff;
}
.riqiDropdown:active {
  color: #40a9ff;
}
.riqiDropdown-a {
  font-size: 10px;
  line-height: 20px;
  font-weight: normal;
}
.riqiDropdown-item {
  background-color: #142766 !important;
  border: 1px solid #3c6fd2 !important;
  border-radius: 0px !important;
}
/* 隐藏导航栏相关样式 */
.sheaderquyu {
  height: 24px;
  position: relative;
  bottom: 0px;
}
.jiancequyu {
  position: relative;
  bottom: -18px;
  height: 20px;
}
.sheader {
  margin-top: 15px;
  margin-bottom: -18px;
  height: 50px;
}
/* 异常检测 更多按钮样式 */
.more-button {
  float: right !important;
  font-size: 12px !important;
  color: #ffffff !important;
  margin-right: 10px !important;
  margin-top: -5px !important;
}
.more-button:hover {
  color: #1af7ff !important;
}
.more-button:active {
  color: #40a9ff !important;
}
.more-icon {
  color: #ffffff;
  float: right;
  font-size: 15px;
  margin-left: 5px;
  margin-top: -2px;
}

/* 检测记录 时间选择器样式 */
.date-picker {
  float: right !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
}
.date-picker span {
  width: 78px;
  height: 20px;
  color: #ffffff;
  padding: 2px 10px;
  font-size: 12px;
  border: 1px solid #ffffff;
  font-weight: normal;
}
.date-picker-icon {
  margin-right: 5px;
  color: #fff;
  font-size: 14px;
}
.center {
  display: flex;
  height: 160px;
  margin: 20px 0;
}

/* 概要统计相关样式 */
.gaiyao-wai {
  width: 410px;
  margin-right: 20px;
  border: 1px solid #3c6fd2;
}
.gaiyao-fenbu {
  display: flex;
  justify-content: space-around;
}

/* 安全评价相关样式 */
.anquan {
  z-index: 999;
  float: right;
  position: absolute;
  width: 171px;
}
.anquandengji {
  font-size: 26px;
  color: #ffffff;
  margin: 20px 0;
}
.anquandengji span {
  color: #ff6635;
}
.anquanjianyi {
  font-size: 16px;
  color: #ffffff;
  margin-top: 20px;
}
.rader {
  width: 100%;
  height: 100%;
  z-index: 98;
  position: absolute;
}
</style>

<style lang="less" scoped>
/deep/.el-button + .el-button {
  margin-left: 0px;
}
/deep/ .map-button {
  padding: 0px 20px;
}
</style>
